<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="生产单号">
      <el-input
        v-model="formInline.productionOrderID"
        placeholder="生产单号"
        clearable
      />
    </el-form-item>

    <el-form-item label="入库主题">
      <el-input
        v-model="formInline.stockInSubject"
        placeholder="入库主题"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getStockInList">查询</el-button>
      <el-button type="warning" @click="exportExcel">导出</el-button>
    </el-form-item>
  </el-form>
  <el-table
    ref="multipleTableRef"
    :data="stockInList"
    style="width: 100%"
    border
  >
    <el-table-column prop="StockInType" label="入库类型" align="center">
    </el-table-column>
    <el-table-column
      prop="StockInCode"
      label="入库单号"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column prop="StockInSubject" label="入库主题" align="center">
    </el-table-column>
    <el-table-column prop="StockInDate" label="入库日期" align="center">
      <template v-slot="slot">
        {{ slot.row.StockInDate.substr(0, 10) }}
      </template>
    </el-table-column>
    <el-table-column
      prop="ProductionOrderID"
      label="生产单号"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column prop="StockInEmployee" label="入库员工" align="center">
    </el-table-column>
    <el-table-column
      prop="WarehouseName"
      label="入库仓库"
      align="center"
    ></el-table-column>
    <el-table-column
      prop="Remarks"
      label="备注"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column
      prop="address"
      label="操作"
      show-overflow-tooltip
      align="center"
    >
      <template v-slot="slot">
        <el-link type="danger" @click="del(slot.row.StockInId)">删除</el-link>
        &nbsp;&nbsp;
        <el-link type="warning" @click="update(slot.row.StockInId)"
          >编辑</el-link
        >
      </template>
    </el-table-column>
  </el-table>

  <table>
    <tr>
      <td>
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="size"
          :page-sizes="[10, 20, 30, 40]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </td>
    </tr>
  </table>
</template>

<script lang="ts" setup>
import axios from "axios";
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";

const page = ref(1);
const size = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const totalCount = ref(0);
const stockInList = ref([]);

const route = useRoute();
const router = useRouter();

const formInline = reactive({
  productionOrderID: "",
  stockInSubject: "",
});

const getStockInList = () => {
  axios
    .get("Storage/GetStockInPage", {
      params: {
        productionOrderID: formInline.productionOrderID,
        stockInSubject: formInline.stockInSubject,
        page: page.value,
        size: size.value,
      },
    })
    .then((res) => {
      stockInList.value = res.data.Data;
      totalCount.value = res.data.TotalCount;
    });
};

const update = (StockInId: string) => {
  router.push("/UserList/intputById?stockInId=" + StockInId);
};

const del = (StockInId: string) => {
  ElMessageBox.confirm("确认要删除吗?", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    axios.delete(`Storage/DeleteData?stockInId=${StockInId}`).then((res) => {
      if (res.data.Code == 200) {
        ElMessage.success(res.data.Message);
        getStockInList();
      }
    });
  });
};

// 在 Vue3 组件中定义导出方法
const exportExcel = async () => {
  try {
    const response = await axios.get("Storage/ExportToExcel", {
      responseType: "blob",
    });

    if (response.status === 200) {
      const blob = new Blob([response.data], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      });
      const downloadUrl = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = downloadUrl;
      a.download = "入库列表.xlsx"; // 设置下载文件名
      a.click();
      window.URL.revokeObjectURL(downloadUrl);
    } else {
      // 处理请求失败的情况
    }
  } catch (error) {
    // 处理异常情况
  }
};

const handleSizeChange = (val: number) => {
  size.value = val;
  getStockInList();
};
const handleCurrentChange = (val: number) => {
  page.value = val;
  getStockInList();
};

getStockInList();
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
